html body{
    height: 100%;
    /* font-size: 26.67vw; */
    font-size: 100px;
    background-color: #f5f5f5;
}
.header{
   width: 100vw;
   height: 5rem;
    display: flex;
    justify-content: space-around;
    background-color: #ff8a00;
}
.logo, .my{
    display: flex;
    justify-content: center;
    align-items: center;
}
.logo img{
    width: 10rem;
    height: 4rem;
}
.my img{
    width: 3rem;
    height: 3rem;
    margin: 0px 0.5rem;
}
.banner{
    width: 100vw;
    height: 16.5rem;
    position: relative;
}
.banner-img img{
    width: 100vw;
}

.zufang{
    height: 2vh;
    font-size: 0.5rem;
    padding: 1rem;
    border-bottom:1px solid #d6d6d6;
    background-color: #fff;
 }
 .zufang  span{
    font-weight: 700;
 }
 .detail-head{
    width: 100vw;
    height: 18.5rem;
    background-color: #fff;
    border-bottom: 1px solid #d6d6d6;
}
.detail-img {
    position: relative;
}
.detail-img img{
    width: 100vw;
}
.detail-img span{
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    font-size: 0.5rem;
    color: #fff;
    background-color: rgba(39, 37, 37,0.7);
    border-radius:0.5rem ;
    padding:0rem 0.5rem;
}
.detail-text{
    /* height: 5rem; */
    font-size: 1rem;
    align-items: center;
    padding: 0rem 1rem;
    /* margin: 1rem 0rem; */
    display: flex;
    border-bottom: 1px solid #d6d6d6;
}
.detail-text .p{
    flex: 4;
    height: 5rem;
    display: flex;
    align-items: center;
    border-right: 1px solid #d6d6d6;
}
.detail-text .xin{
    font-size: 1rem;
    color: #888;
    flex: 1;
    text-align: center;
}
.detail-text .xin img{
    width: 1.5rem;
    height: 1.5rem;
}
.list{
    width: 100vw;
    height: 6rem;
    display: flex;
    font-size: 1rem;
    align-items: center;
    border-bottom: 1px solid #d6d6d6;
}
.list .zujin{
    flex: 1;
    text-align: center;
    border-right: 1px solid #d6d6d6;
}
.list .zujin span{
    color: #ff8a00;
}
.detail-list{
    width: 100vw;
    background-color: #fff;
    border-top: 1px solid #d6d6d6;
}
.list-con{
    width: 100vw;
    height: 3rem;
    border-bottom: 1px solid #d6d6d6;
    display: flex;
    align-items: center;
    text-align: left;
    margin: 0rem 1rem;
}
.list-con span{
    flex: 1;
    font-size: 0.9rem;
}
.spac{
    background-color: #fff;
    margin: 0.8rem;
    border: 1px solid #d6d6d6;
}
.spac-head{
    font-size: 1.5rem;
    font-weight: 700;
    color: #ff8a00;
    padding: 1rem;
    border-bottom: 1px solid #d6d6d6;
}
.spac-con{
    font-size: 1rem;
    padding: 0.8rem;
}
.spac span{
    color: red;
}
.spac p{
    margin: 0.5rem 0rem;
}
/* .spac-con img{
    width:85.5vw;
} */
#container {
    height: 15rem;
    width:85.5vw;
}
.spac1-con{
    display: flex;
    justify-content: center;
    align-items: center;
}
.spac1-con .p{
    flex: 1;
    font-size: 1rem;
    margin: 0.5rem;
}
.spac1-con .p1,
.spac1-con .p2{
    flex: 1;
    font-size: 1rem;
    margin: 0.5rem;
    text-align: center;
}
.spac1-con .p img,
.spac1-con .p1 img,
.spac1-con .p2 img{
    width: 3rem;
    height: 3rem;
}
.spac1-con .p1 span{
    font-size: 1rem;
    color: #5cc995;
}
.spac1-con .p2 span{
    font-size: 1rem;
    color: #5baede;
}
.footer{
    width: 100vw;
    height: 12rem;
    background-color: #2f3130;
}
.footer .footer-head{
    font-size: 1rem;
    color: #888;
    font-weight: 700;
    margin: 1rem;
    padding: 0.5rem 0rem;
    border-bottom: 1px solid #888;
}
.footer .download{
    display: flex;
    justify-content: space-around;
    font-size: 1rem;
    color: #888;
}
.apple img, .android img{
    width: 1.5rem;
    height: 1.5rem;
    padding: 0rem 0.5rem; 
}
.apple p, .android p{
    float: right;
}
.footer-text{
    font-size: 0.5rem;
    text-align: center;
    color: #888;
    margin-top: 1rem;
}
